<template>
  <div class="bar3d">
    <div class="top">
      <div class="xing">⭐</div>
      <div class="title">地区分布</div>
      <div class="select">
        <el-select v-model="value" placeholder="请选择"  @change="update">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="chart">
      <div ref="chart" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  name: "Bar3DChart",
  data() {
    return {
      chart: null,
      options: [
        {
          value: "柱状图",
          label: "柱状图",
        },
        {
          value: "折线图",
          label: "折线图",
        },
      ],
      value: "折线图",
      barData:{
        xNames: ["印度", "俄罗斯", "俄罗斯", "俄罗斯", "俄罗斯", "俄罗斯"],
        yValues:[60, 30, 20, 20, 20, 30],
      },
      lineData:{
        xNames: ["1月", "1月", "1月", "1月", "1月", "1月"],
        yValues:[60, 30, 20, 20, 20, 30],
      },
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);

      //   const option = {
      //     tooltip: {},
      //     visualMap: {
      //       max: 20,
      //       inRange: {
      //         color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
      //       }
      //     },
      //     xAxis3D: {
      //       type: 'category',
      //       data: ['A', 'B', 'C', 'D', 'E']
      //     },
      //     yAxis3D: {
      //       type: 'category',
      //       data: ['W', 'X', 'Y', 'Z']
      //     },
      //     zAxis3D: {
      //       type: 'value'
      //     },
      //     grid3D: {
      //       boxWidth: 100,
      //       boxDepth: 80,
      //       viewControl: {
      //         alpha: 30,
      //         beta: 40,
      //       },
      //       light: {
      //         main: {
      //           intensity: 1.2,
      //           shadow: true
      //         },
      //         ambient: {
      //           intensity: 0.3
      //         }
      //       }
      //     },
      //     series: [{
      //       type: 'bar3D',
      //       data: [
      //         [0, 0, 5],
      //         [0, 1, 7],
      //         [0, 2, 8],
      //         [0, 3, 10],
      //         [1, 0, 6],
      //         [1, 1, 9],
      //         [1, 2, 12],
      //         [1, 3, 14],
      //         [2, 0, 8],
      //         [2, 1, 11],
      //         [2, 2, 15],
      //         [2, 3, 18],
      //         [3, 0, 10],
      //         [3, 1, 13],
      //         [3, 2, 17],
      //         [3, 3, 20],
      //         [4, 0, 12],
      //         [4, 1, 15],
      //         [4, 2, 19],
      //         [4, 3, 22],
      //       ].map(item => ({ value: item })),
      //       shading: 'lambert',
      //       label: {
      //         show: false,
      //       },
      //       emphasis: {
      //         label: {
      //           fontSize: 16,
      //           color: '#900'
      //         },
      //         itemStyle: {
      //           color: '#900'
      //         }
      //       }
      //     }]
      //   };

      let option = this.chartData
      this.chart.setOption(option);
    },
    update(){
        let option = this.chartData
        this.chart.setOption(option, true);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
  computed: {
    chartData() {
        let option = null
        if(this.value == '柱状图'){
            option = {
                    tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    },
                    legend: {
                        show: true,
                        data: ['数量'],
                        icon: 'rect', 
                        itemStyle: {
                            color: '#1991ff'  // 设置图例图标颜色为蓝色
                        },
                        itemWidth: 10,   // 图例图标宽度，默认是25
                        itemHeight: 10,
                        textStyle: {
                            color: '#ffffff',  // 设置文字颜色为蓝色
                            fontSize: 14      // 设置文字大小为16像素
                        },
                        left: 'center',   // 水平居中
                        top: '18px' 
                    },
                    grid: {
                    top: "15%",
                    bottom: "15%",
                    },
                    xAxis: {
                    type: "category",
                    axisLabel: {
                        color: "rgba(210,227,249,0.80)",
                        fontSize: 14 ,       // 标签文字大小（可选）
                        fontWeight:500,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                        color: "#1B3F66",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: ["合肥", "安庆", "芜湖", "南京", "杭州", "杭2"],
                    },
                    yAxis: {
                    type: "value",
                    name: "事件数量",
                    nameTextStyle: {
                        color: "#85A9DA",
                        fontSize: 14,
                        fontWeight: "500",
                        padding: [0, 0, 10, 5], // 上右下左，调整名称与轴线距离
                    },
                    axisLabel: {
                        color: "#85A9DA",
                        fontSize: 14,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                        color: "#1B3F66",
                        },
                    },
                    splitLine: {
                        lineStyle: {
                        color: "#1B3F66",
                        type: "dashed",
                        },
                    },
                    },
                    series: [
                    {
                        type: "pictorialBar",
                        name: "pictorial element",
                        z: 10,
                        data: [60, 30, 20, 20, 20, 30],
                        symbol: "diamond",
                        symbolOffset: [0, "-50%"],
                        symbolPosition: "end", //图形边缘与柱子结束的地方内切
                        symbolSize: ["-50%", 10], //根据柱子大小来做调整
                        itemStyle: {
                        normal: {
                            color: "#5cc4ff",
                        },
                        },
                    },
                    {
                        type: "bar", // 如果使用背景颜色，这里需要更正为'bar'
                        name: "数量",
                        // barGap: "-100%",
                        // symbol: 'image://' + myImage, // 图片自己切或者让UI设计切喔
                        symbolOffset: [0, 0],
                        // z: 2,
                        itemStyle: {
                        color: {
                            x: 1,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            type: "linear",
                            global: false,
                            colorStops: [
                            { offset: 0, color: "rgba(30, 123, 185,1)" },
                            { offset: 0.5, color: "rgba(30, 123, 185,1)" },
                            { offset: 0.5, color: "rgba(52, 156, 230,1)" },
                            { offset: 1, color: "rgba(52, 156, 230,1)" },
                            ],
                        },
                        },
                        data: [60, 30, 20, 20, 20, 30],
                        barWidth: 20,
                        label: {
                            show: true,         // 显示标签
                            position: 'top',    // 标签位置在柱子上方
                            color: '#FFD516',      // 标签文字颜色（可选）
                            fontSize: 14 ,       // 标签文字大小（可选）
                            fontWeight:500,
                            // formatter: '{c}'  // 默认显示数值，也可以自定义格式
                        }
                    },
                    //   {
                    //     type: "pictorialBar",
                    //     name: "joy",
                    //     barGap: "-100%",
                    //     z: 3,
                    //     data: [60,30,20,20,20,30],
                    //     symbol: "triangle",
                    //     symbolOffset: [0, 10],
                    //     symbolSize: ["-45%", 10],
                    //     symbolRotate: 180,
                    //     itemStyle: {
                    //         color: {
                    //         x: 1,
                    //         y: 0,
                    //         x2: 0,
                    //         y2: 0,
                    //         type: "linear",
                    //         global: false,
                    //         colorStops: [
                    //             { offset: 0, color: "#bd530a" },
                    //             { offset: 0.5, color: "#bd530a" },
                    //             { offset: 0.5, color: "#ca7e06" },
                    //             { offset: 1, color: "#ca7e06" },
                    //         ],
                    //         },
                    //     },

                    //   },
                    ],
                };
        }else{
            option = {
                tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
                },
                legend: {
                    show: true,
                    data: ['数量'],
                    icon: 'rect', 
                    itemStyle: {
                        color: '#1991ff'  // 设置图例图标颜色为蓝色
                    },
                    itemWidth: 12,   // 图例图标宽度，默认是25
                    itemHeight: 2,
                    textStyle: {
                        color: '#ffffff',  // 设置文字颜色为蓝色
                        fontSize: 14      // 设置文字大小为16像素
                    },
                    left: 'center',   // 水平居中
                    top: '18px' 
                },
                grid: {
                    top: "15%",
                    bottom: "15%",
                     left: 60,
                },
                xAxis: {
                type: "category",
                boundaryGap: false, 
                axisLabel: {
                    color: "rgba(210,227,249,0.80)",
                    fontSize: 14 ,       // 标签文字大小（可选）
                    fontWeight:500,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                    color: "#1B3F66",
                    },
                },
                axisTick: {
                    show: false,
                },
                    splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',   // 虚线
                        color: '#1B3F66',    // 线颜色
                        // width: 1          // 线宽
                    }
                    },
                    // offset:20,
                data: ["合肥", "安庆", "芜湖", "南京", "杭州", "杭2"],
                },
                yAxis: {
                type: "value",
                name: "事件数量",
                nameTextStyle: {
                    color: "#85A9DA",
                    fontSize: 14,
                    fontWeight: "500",
                    padding: [0, 16, 10, 0], // 上右下左，调整名称与轴线距离
                },
                axisLabel: {
                    color: "#85A9DA",
                    fontSize: 14,
                    margin:20
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                    color: "#1B3F66",
                    },
                },
                splitLine: {
                    lineStyle: {
                    color: "#1B3F66",
                    type: "dashed",
                    },
                },
                },
                series: [
                {
                    type: "line", // 如果使用背景颜色，这里需要更正为'bar'
                    name: "数量",
                    symbolOffset: [0, 0],
                    data: [60, 30, 20, 20, 20, 30],
                    symbol: 'image://image/事件圆点.png',
                    symbolSize: 20
                },
                ],
            };
        }
        return option
      
    }
  }
};
</script>
<style lang="less" scoped>
.bar3d {
  width: 400px;
  height: 470px;
  position: relative;
  background-image: linear-gradient(
    180deg,
    rgba(20, 89, 180, 0) 0%,
    rgba(15, 79, 163, 0.3) 100%
  );
  border: 1px solid rgba(14, 62, 128, 1);
  .top {
    width: 400px;
    height: 48px;
    line-height: 48px;
    position: relative;
    background-image: linear-gradient(
      270deg,
      rgba(10, 75, 154, 0) 0%,
      #0a4b9a 100%
    );
    .xing {
      position: absolute;
      left: 12px;
    }
    .title {
      position: absolute;
      left: 51px;
      font-family: DingTalk-JinBuTi;
      font-size: 22px;
      color: #ffffff;
      letter-spacing: 4.4px;
      text-shadow: 0 2px 5px #004da8;
      font-weight: 400;
    }
    .select {
      position: absolute;
      right: 20px;
      top: 8px;
      width: 86px;
      height: 32px;
      background-image: linear-gradient(
        180deg,
        rgba(15, 74, 159, 0) 0%,
        rgba(17, 75, 160, 0.95) 100%
      );
      border: 1px solid rgba(21, 85, 173, 1);
      border-radius: 4px;
      box-sizing: border-box;
      overflow: hidden;
      ::v-deep .el-input__inner {
        width: 86px;
        height: 32px;
        background: linear-gradient(
          180deg,
          rgba(15, 74, 159, 0) 0%,
          rgba(17, 75, 160, 0.95) 100%
        );
        border: 1px solid rgba(21, 85, 173, 1);
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 14px;
        color: #ffffff;
        padding-right: 0px;
      }
    }
  }
  .chart {
    width: 100%;
    height: 422px;
  }
}
</style>